<div class="layui-card">

	<div class="layui-card-header">
		<h2 class="header-title"><i class="layui-icon layui-icon-app"></i> 菜单管理</h2>
		<span class="layui-breadcrumb pull-right"> <a href="#!console">首页</a>
			<a><cite>菜单管理</cite></a>
		</span>
	</div>
	
	<div class="layui-card-body">
		<div class="layui-card">
			<div class="layui-card-body">
				<input type="hidden" id="csrftoken" value="${csrftoken!}"/>
	            <div class="test-table-reload-btn" style="margin-bottom: 10px;">
             		 关键词搜索：
	            	<div class="layui-inline">
	                	<input type="text" id="keyword" placeholder="请输入关键词检索" autocomplete="off" class="layui-input">
	              	</div>
	              	<button class="layui-btn" id="menu-btn-search">搜索</button>
            	</div>
				<table class="layui-table" id="menu-table" lay-filter="menu-table"></table>
			</div>
		</div>
	</div>


	<!-- 表格工具栏 -->
	<script type="text/html" id="menu-table-toolbar">
    	<a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增一级菜单</a>
    	<a　id="menu-table-toolbar-del" style="display:none" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
	</script>
	<!-- 表格操作列 -->
	<script type="text/html" id="menu-table-bar">
		{{# if(d.pid == -1){ }}
    	<a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增二级菜单</a>
		{{# } }}
	</script>

	<!-- 表格状态列 -->
	<script type="text/html" id="menu-tpl-used">
    	<input type="checkbox" lay-filter="menu-tpl-used" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{d.used==1?'checked':''}}/>
	</script>

	<script>
		layui.use([ 'form', 'table', 'treetable', 'util', 'config', 'admin' ], function() {
			var form = layui.form;
			var table = layui.table;
			var config = layui.config;
			var layer = layui.layer;
			var util = layui.util;
			var admin = layui.admin;
			
			var treetable = layui.treetable;

			// 渲染表格
		    var renderTable = function() {
		    	layer.load(2);
				treetable.render({
			        treeColIndex: 2,
			        treeSpid: -1,
			        treeIdName: 'id',
			        treePidName: 'pid',
			        treeDefaultClose: false,
			        treeLinkage: true,
			        elem: '#menu-table',
					url : '${rc.contextPath}/menu/data',
					toolbar : '#menu-table-toolbar',
					defaultToolbar: ['filter'],
					method : 'POST',
					loading : true,
			        cols: [[
			            {type: 'numbers'},
			           	{type: 'checkbox'},
			            {title: 'ID', field: 'id', width: 260},
			            {title: '名称', field: 'name', edit: 'text', width: 180},
			            {title: '图标', field: 'icon', edit: 'text', width: 180},
			            {title: '路由', field: 'url', edit: 'text', width: 180},
			            {title: '链接', field: 'path', edit: 'text', width: 180},
			            {title: '排序', field: 'sortNum', edit: 'text', width: 180},
						{title: '启用状态', field : 'ismenu', templet : '#menu-tpl-used', width: 100},
				       	{title: '创建时间', templet: function(d) { return util.toDateString(d.createTime); }, width: 200},
				       	{title: '修改时间', templet: function(d) { return util.toDateString(d.updateTime); }, width: 200},
						{title: '操作', toolbar : '#menu-table-bar', width: 185}
			        ]],
	                done: function () {
	                    layer.closeAll('loading');
	                }
			    });
			};
			renderTable();
			
			// 搜索按钮点击事件
			$('#menu-btn-search').click(function() {
				treetable.expandAll('#menu-table');

				var keyword = $('#keyword').val();
				var searchCount = 0;
	            $('#menu-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
	                $(this).css('background-color', 'transparent');
	                var text = $(this).text();
	                if (keyword != '' && text.indexOf(keyword) >= 0) {
	                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
	                    if (searchCount == 0) {
	                        treetable.expandAll('#auth-table');
	                        $('html,body').stop(true);
	                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
	                    }
	                    searchCount++;
	                }
	            });
	            
	            if (keyword == '') {
	                layer.msg("请输入搜索内容", {icon: 5});
	            } else if (searchCount == 0) {
	                layer.msg("没有匹配结果", {icon: 5});
	            }
			});
			
			//监听头工具栏事件
			table.on('toolbar(menu-table)', function(obj){
			    if('add' == obj.event) {
			    	showAddModel("-1");
			    	return;
			    } else if ('del' == obj.event) {
				    var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data;
					if(data.length > 0) {
						var ids = [];
						data.forEach(function(d) {
							ids.push(d.id);
						})
						layer.confirm('确定要删除选择的菜单记录吗？', function(i) {
							layer.close(i);
							layer.load(2);
							admin.req('${rc.contextPath}/menu/delete', {
								ids: ids,
								csrftoken: $("#csrftoken").val()
							}, function(data) {
								layer.closeAll('loading');
								if (data.code == 200) {
									layer.msg(data.message, {
										icon : 1
									});
									renderTable();
								} else {
									layer.msg(data.message, {
										icon : 2
									});
								}
							}, 'POST');
						});
					} else {
						layer.msg('请至少选择一条记录', {
							icon : 2
						});
					}
			    	return;
			    }
			    
			});

			// 工具条点击事件
			table.on('tool(menu-table)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				if(layEvent === 'add') {
					showAddModel(data.id)
				}
			});
			
			//监听单元格编辑
		  	table.on('edit(menu-table)', function(obj){
			    var value = obj.value ,data = obj.data ,field = obj.field;
			    layer.load(2);
				admin.req('${rc.contextPath}/menu/updateField', {
					csrftoken: $("#csrftoken").val(),
					id : data.id,
					field: field,
					value : value
				}, function(data) {
					layer.closeAll('loading');
					layer.msg(data.message, {
						icon : data.code == 200 ? 1 : 2
					});
					if(data.code == 200) {
						renderTable();
					}
				}, 'POST');
		  	});

			//显示表单弹窗
			var showAddModel = function(pid) {
				admin.popupCenter({
					title : '新增菜单',
					path : '${rc.contextPath}/menu/add?pid=' + pid,
					finish : function() {
						renderTable();
					}
				});
			};
			
			// 复选框选择监听
			table.on('checkbox(menu-table)', function(obj) {
			    var checkStatus = table.checkStatus('menu-table'),
		    	data = checkStatus.data;
				if(data.length > 0) {
					$("#menu-table-toolbar-del").show();
				} else {
					$("#menu-table-toolbar-del").hide();
				}
			});
			
			//监听行单击事件
		  	table.on('row(menu-table)', function(obj){
		    	//标注选中样式
		    	obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
		  	});

			// 修改menu状态
			form.on('switch(menu-tpl-used)', function(obj) {
				layer.load(2);
				admin.req('${rc.contextPath}/menu/changeusedstatus', {
					menuId : obj.elem.value,
					used : obj.elem.checked ? 1 : 0
				}, function(data) {
					layer.closeAll('loading');
					if (data.code == 200) {
						layer.msg(data.message, {
							icon : 1
						});
						renderTable();
					} else {
						layer.msg(data.message, {
							icon : 2
						});
						$(obj.elem).prop('checked', !obj.elem.checked);
						form.render('checkbox');
					}
				}, 'POST');
			});

		});
	</script>